import {formatDate, getRealSize, Touchable} from '../../utils';
import {StyleSheet, Text, View} from 'react-native';
import _ from 'lodash';
import React from 'react';
import FAIcon from 'react-native-vector-icons/FontAwesome5';
import {I18n} from '../../reducers/intl';
import {get} from 'react-native/Libraries/TurboModule/TurboModuleRegistry';
import {OrderState, OrderStateName} from '../../reducers/order-list';

class MessageItem extends React.PureComponent {
  onChat = () => {
    this.props.onChat();
  };

  toOrder = () => {
    this.props.toOrder();
  };

  render() {
    const {order_no, patient_name, created, unread} = this.props;
    return (
      <View style={Styles.box}>
        <View style={Styles.head}>
          <Touchable onPress={this.toOrder}>
            <Text style={Styles.title} numberOfLines={1}>
              {I18n.t('order.props.no')}:{order_no}
            </Text>
          </Touchable>
          <Touchable onPress={this.onChat}>
            <View style={Styles.icon}>
              {unread ? <Text style={Styles.badge}>{unread}</Text> : null}
              <FAIcon
                name="chevron-right"
                color="#8F8F8F"
                size={getRealSize(12)}
              />
            </View>
          </Touchable>
        </View>
        <View style={Styles.content}>
          <View style={Styles.row}>
            <Text style={Styles.label} numberOfLines={1}>
              {I18n.t('order.props.patient.name')}:{patient_name}
            </Text>
          </View>
          <View style={Styles.row}>
            <Text style={Styles.label} numberOfLines={1}>
              {I18n.t('order.props.supplier')}:
              {_.get(this.props, 'seller.vendor_name', '')}
            </Text>
            <Text style={Styles.time}>
              {formatDate(created, 'YYYY-MM-DD HH:mm')}
            </Text>
          </View>
        </View>
      </View>
    );
  }
}

export default MessageItem;

const Styles = StyleSheet.create({
  box: {
    backgroundColor: '#f7f7f7',
    marginHorizontal: getRealSize(15),
    paddingHorizontal: getRealSize(15),
    paddingVertical: getRealSize(12),
    borderRadius: getRealSize(4),
  },
  head: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
  },
  title: {
    flex: 1,
    marginRight: getRealSize(12),
    fontSize: getRealSize(14),
    fontWeight: 'bold',
    maxWidth: getRealSize(266),
    color: '#333',
  },
  icon: {
    flexDirection: 'row',
    height: getRealSize(18),
    width: getRealSize(32),
    alignItems: 'center',
    justifyContent: 'flex-end',
  },
  state: {},
  content: {
    flex: 1,
    marginTop: getRealSize(12),
  },
  row: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
  },
  label: {
    flex: 1,
    fontSize: getRealSize(12),
    fontWeight: '400',
    color: '#757575',
  },
  time: {
    textAlign: 'right',
    fontSize: getRealSize(12),
    fontWeight: '400',
    color: '#757575',
  },
});
